import React from 'react';
import { connect } from 'react-redux';
import { ListView } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import ActionSheet from '../../components/common/actionSheet';

@connect(({ invoice }) => {
  return {
    page: invoice.getIn(['invoiceList', 'page']),
    hasMore: invoice.getIn(['invoiceList', 'hasMore']),
    dataList: invoice.getIn(['invoiceList', 'list']),
  };
})
class InvoiceList extends BaseComponent {
  state = {
    type: 'all',
  }
  componentDidMount() {
    this.requestData(1);
  }

  selectType = (type) => {
    this.setState({ type });
    this.actionSheet.close();
    setTimeout(() => {
      this.requestData(1);
    }, 300);
  }

  showTypeSelector = () => {
    this.actionSheet.show({
      title: null,
      options: [
        {
          title: '全部申请',
          action: () => this.selectType('all'),
        },
        {
          title: '已通过',
          action: () => this.selectType('pass'),
        },
        {
          title: '审核中',
          action: () => this.selectType('ing'),
        },
        {
          title: '未通过',
          action: () => this.selectType('reject'),
        },
      ],
    });
  }

  requestData = (page) => {
    let status;
    const { type } = this.state;
    switch (type) {
      case 'pass':
        status = [3];
        break;
      case 'ing':
        status = [0, 1];
        break;
      case 'reject':
        status = [4];
        break;
      default:
        break;
    }
    this.props.dispatch({
      type: 'invoice/fetchInvoiceList',
      payload: {
        targetPage: page || (this.props.page + 1),
        pageSize: 10,
        status,
      },
    });
  }

  sendEmail = (invoice) => {
    this.props.history.push({
      pathname: 'sendEmail',
      state: { invoice },
    });
  }

  goDetail = (invoice) => {
    // window.location.href = invoice.get('invoiceUrl');
    this.props.dispatch({
      type: 'invoice/fetchUrl',
      payload: {
        invoiceId: invoice.get('recordId'),
        // invoiceId: '334021814667841536011',
      },
    });
  }

  goInvoice = () => {
    this.props.history.push('invoice');
  }

  render() {
    const { type } = this.state;
    let typeText;
    switch (type) {
      case 'all':
        typeText = '全部申请';
        break;
      case 'pass':
        typeText = '已通过';
        break;
      case 'ing':
        typeText = '审核中';
        break;
      case 'reject':
        typeText = '未通过';
        break;
      default:
        break;
    }
    const { hasMore, dataList } = this.props;
    const cells = dataList.map((invoice, index) => {
      let preView;
      let sendView;
      if (invoice.canPreview()) {
        preView = <div className="action-btn" onClick={() => this.goDetail(invoice)}>查看</div>;
        sendView = <div className="action-btn" onClick={() => this.sendEmail(invoice)}>重发邮件</div>;
      }
      return (
        <div className="invoice-cell" key={index}>
          <div className="cell-header">
            <div>{invoice.getType()}</div>
            <div className={`status status-${invoice.get('status')}`}>{invoice.getStatus()}</div>
          </div>
          <div className="cell-body">
            <div className="content-row">
              <div>订单编号</div>
              <div className="value">{invoice.get('recordId')}</div>
            </div>
            <div className="content-row">
              <div>订单金额</div>
              <div className="value">{invoice.get('rateCountAmountYuan')}元</div>
            </div>
            <div className="content-row">
              <div>发票类型</div>
              <div className="value">电子发票</div>
            </div>
            <div className="content-row">
              <div>下单时间</div>
              <div className="value">{invoice.get('createTime')}</div>
            </div>
          </div>
          <div className="btn-view">
            {sendView}
            {preView}
          </div>
        </div>
      );
    });
    return (
      <div className="invoice-list-base">
        <div className="header">
          <div>注：历史发票保存3个月</div>
          <div className="invoice-btn" onClick={this.goInvoice}>去开票</div>
        </div>
        <div className="filter-view" onClick={this.showTypeSelector}>
          <div>{typeText}</div>
          <i className="iconfont icon-trangle" />
        </div>
        <ListView
          className="list"
          loadMore={this.requestData}
          hasMore={hasMore}
          empty={this.renderEmpty('没有开票记录')}
          renderFooter={this.renderFooter}
        >
          {cells}
        </ListView>
        <ActionSheet ref={actionSheet => this.actionSheet = actionSheet} />
      </div>
    );
  }
}

export default InvoiceList;
